<template>
  <el-drawer v-model="drawer" size="20%" :title="title" >
    <el-tree class="el-tree" :data="data"
             :props="props"  ref="treeRef"
             default-expand-all  node-key='id'
             :default-checked-keys="defaultCheckedKeys"
             show-checkbox>
    </el-tree>
    <el-button type="info" @click="drawer">取消</el-button>
    <el-button type="success" @click="treeBtn">确定</el-button>
  </el-drawer>
</template>

<script>
export default {
  name: "drawerTree",
  props: {
      drawer: {type: Boolean,default:false},
      data: {type: Array},
      props:{type: Object},
      defaultCheckedKeys: {type: Object},
      title: {type: String}
  },
  emits: ['treeBtn'],
  methods: {
    treeBtn() {
      const treeArray = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      this.$emit('treeBtn', treeArray)
    }
  }
}
</script>

<style scoped>

</style>